<template>
  <div class="moemntWrapper">
    <img v-if="props.moment.avatar == ''" src="@/assets/images/tx1.jpg" />
    <img v-else :src="props.moment.avatar" />
    <div class="momentContent">
      <!--昵称-->
      <div class="nickname">{{ props.moment.userName }}</div>
      <!--发布内容-->
      <MomentContent />
      <!--地址-->
      <div class="location" v-if="props.moment.location">{{ props.moment.location }}</div>
      <!--日期组件-->
      <DateComponent />
      <!--评论组件-->
      <!-- <CommentComponent v-if="props.moment.likeList.length > 0 || props.moment.commentList.length > 0"/> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { provide } from 'vue'
import { HeartOutlined } from '@ant-design/icons-vue'
import MomentContent from './MomentContent.vue'
import DateComponent from './DateComponent.vue'
import CommentComponent from './CommentComponent.vue'
const props = defineProps({
  moment: {
    type: Object,
    default: () => {}
  }
})
// 给子组件传递参数
provide('moment', props.moment)
</script>
<style lang="less" scoped>
.moemntWrapper {
  width: 92%;
  margin: 0 auto;
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  > img {
    height: 35px;
    width: 35px;
  }
  .momentContent {
    flex: 1;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f1f1;
    .nickname {
      color: #6d7cc7;
      font-size: 14px;
    }
    .desc {
      font-size: 14px;
      color: #000;
    }

    .location {
      font-size: 12px;
      margin-top: 5px;
      color: #6d7cc7;
    }
  }
}
</style>
